<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制柱状图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <canvas width="800" height="420"></canvas>
</body>
<script>
  // 获取节点
  let canvas = document.querySelector('canvas')
  // 获取上下文
  let ctx = canvas.getContext('2d')
  // 绘制左上角文本
  ctx.font = "16px 微软雅黑"
  ctx.fillText('数据可视化', 50, 80)
  // 绘制坐标轴
  // 设定线段坐标点
  ctx.moveTo(100, 100)
  ctx.lineTo(100, 400)
  ctx.lineTo(700, 400)

  // 绘制其他线段
  ctx.moveTo(100, 100)
  ctx.lineTo(700, 100)
  ctx.fillText('150', 70, 110)

  ctx.moveTo(100, 160)
  ctx.lineTo(700, 160)
  ctx.fillText('120', 70, 170)

  ctx.moveTo(100, 220)
  ctx.lineTo(700, 220)
  ctx.fillText('90', 70, 230)

  ctx.moveTo(100, 280)
  ctx.lineTo(700, 280)
  ctx.fillText('60', 70, 290)

  ctx.moveTo(100, 340)
  ctx.lineTo(700, 340)
  ctx.fillText('30', 70, 350)
  ctx.fillText('0', 70, 400)

  //绘制水平轴底部线段
  ctx.moveTo(250, 400)
  ctx.lineTo(250, 410)
  // 底部文字
  ctx.fillText('食品', 170, 415)

  ctx.moveTo(400, 400)
  ctx.lineTo(400, 410)
  // 底部文字
  ctx.fillText('数码', 310, 415)

  ctx.moveTo(550, 400)
  ctx.lineTo(550, 410)
  // 底部文字
  ctx.fillText('服饰', 450, 415)

  // 底部文字
  ctx.fillText('箱包', 600, 415)
  // 绘制
  ctx.stroke()
  // 绘制矩形
  ctx.fillStyle = "red"
  ctx.fillRect(130, 200, 100, 200)
  ctx.fillStyle = "skyblue"
  ctx.fillRect(270, 200, 100, 200)

</script>

</html>